<template>
  <div class="patient-card" :class="status">
    <div class="patient-info">
      <div class="avatar-container">
        <Avatar size="large" :src="getAvatarUrl(patient.avatar)">{{ avatarText }}</Avatar>
        <Tag :color="statusColor" class="status-tag">{{ statusText }}</Tag>
      </div>
      <div class="info-container">
        <div class="patient-name">
          <span>{{ patient.name }}</span>
          <Tag v-if="patient.isRevisit" color="blue">复诊</Tag>
          <Tag v-if="patient.hasConsultation" color="green">已AI问诊</Tag>
        </div>
        <div class="patient-details">
          <p>
            <Icon type="md-person" />
            <span>{{ patient.gender }}，{{ patient.age }}岁</span>
          </p>
          <p>
            <Icon type="md-time" />
            <span>就诊时间：{{ formatTime(patient.visitTime || patient.registrationTime) }}</span>
          </p>
          <p v-if="patient.waitingTime">
            <Icon type="md-stopwatch" />
            <span>等待时长：{{ patient.waitingTime }}</span>
          </p>
        </div>
      </div>
    </div>
    <div class="patient-complaint">
      <h4>主诉</h4>
      <p>{{ patient.chiefComplaint || (patient.medicalRecord && patient.medicalRecord.chiefComplaint) || '暂无主诉信息' }}</p>
    </div>
    <div class="action-buttons">
      <Button 
        v-if="status === 'waiting'" 
        type="primary" 
        @click="startDiagnosis"
      >开始诊疗</Button>
      <Button 
        v-if="status === 'inProgress'" 
        type="warning" 
        @click="continueDiagnosis"
      >继续诊疗</Button>
      <Button 
        v-if="status === 'completed'" 
        type="success" 
        @click="viewDiagnosis"
      >查看病历</Button>
      <Button type="text" @click="viewPatientHistory">
        <Icon type="md-list" />
        病史
      </Button>
    </div>
  </div>
</template>

<script>
import { updatePatientStatus } from '@/api/medical-dashboard'

export default {
  name: 'PatientCard',
  props: {
    patient: {
      type: Object,
      required: true
    },
    status: {
      type: String,
      default: 'waiting',
      validator: value => ['waiting', 'inProgress', 'completed'].includes(value)
    }
  },
  computed: {
    avatarText() {
      return this.patient.name ? this.patient.name.charAt(0) : '?';
    },
    statusText() {
      const statusMap = {
        waiting: '待诊',
        inProgress: '诊疗中',
        completed: '已诊'
      };
      return statusMap[this.status] || '未知';
    },
    statusColor() {
      const colorMap = {
        waiting: 'blue',
        inProgress: 'volcano',
        completed: 'green'
      };
      return colorMap[this.status] || 'default';
    }
  },
  methods: {
    getAvatarUrl(avatar) {
      if (avatar && avatar.startsWith('http')) {
        return avatar;
      }
      return 'https://via.placeholder.com/100';
    },
    formatTime(timestamp) {
      if (!timestamp) return '未知';
      const date = new Date(timestamp);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        hour12: false
      });
    },
    async startDiagnosis() {
      try {
        const userId = this.$store.state.user.userId;
        const response = await updatePatientStatus(userId, this.patient.id, 'IN_PROGRESS');
        
        if (response.success) {
          this.$emit('status-change', this.patient, 'inProgress');
          this.$router.push({
            name: 'medicalRecord',
            query: { 
              patientId: this.patient.id,
              status: 'inProgress'
            }
          });
        } else {
          throw new Error(response.message || '更新状态失败');
        }
      } catch (error) {
        console.error('更新患者状态失败:', error);
        this.$Message.error('开始诊疗失败，请重试');
      }
    },
    continueDiagnosis() {
      this.$router.push({
        name: 'medicalRecord',
        query: { 
          patientId: this.patient.id,
          status: this.status
        }
      });
    },
    viewDiagnosis() {
      this.$router.push({
        name: 'medicalRecord',
        query: { 
          patientId: this.patient.id,
          recordId: this.patient.medicalRecordId,
          status: 'completed'
        }
      });
      this.$emit('view-diagnosis', this.patient);
    },
    viewPatientHistory() {
      this.$emit('view-history', this.patient);
    }
  }
}
</script>

<style scoped>
.patient-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 16px;
  margin-bottom: 16px;
  transition: all 0.3s ease;
}

.patient-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.patient-card.waiting {
  border-left: 4px solid #2d8cf0;
}

.patient-card.inProgress {
  border-left: 4px solid #ff9900;
}

.patient-card.completed {
  border-left: 4px solid #19be6b;
}

.patient-info {
  display: flex;
  margin-bottom: 16px;
}

.avatar-container {
  position: relative;
  margin-right: 16px;
}

.status-tag {
  position: absolute;
  top: -5px;
  right: -5px;
  padding: 0 6px;
  border-radius: 10px;
  transform: scale(0.8);
}

.info-container {
  flex: 1;
}

.patient-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.patient-name .ivu-tag {
  margin-left: 8px;
}

.patient-details p {
  margin: 4px 0;
  color: #666;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.patient-details .ivu-icon {
  margin-right: 6px;
  color: #999;
}

.patient-complaint {
  background-color: #f8f9fa;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}

.patient-complaint h4 {
  margin: 0 0 8px 0;
  font-size: 14px;
  color: #666;
}

.patient-complaint p {
  margin: 0;
  color: #333;
  font-size: 14px;
  line-height: 1.5;
}

.action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 